<template>
  <div class="user-management">
    <div class="page-header">
      <h1>用户管理</h1>
      <button @click="showAddUserModal = true" class="btn-primary">
        <i class="icon-add"></i>
        添加用户
      </button>
    </div>

    <!-- 搜索和筛选区域 -->
    <div class="filter-section">
      <div class="search-box">
        <input 
          type="text" 
          placeholder="搜索用户名、邮箱..." 
          v-model="searchQuery"
          @input="handleSearch"
        />
        <i class="icon-search"></i>
      </div>
      <div class="filter-options">
        <select v-model="statusFilter" @change="filterUsers">
          <option value="">全部状态</option>
          <option value="active">活跃</option>
          <option value="inactive">未激活</option>
          <option value="banned">已封禁</option>
        </select>
        <select v-model="roleFilter" @change="filterUsers">
          <option value="">全部角色</option>
          <option value="super_admin">超级管理员</option>
          <option value="admin">管理员</option>
          <option value="moderator">版主</option>
          <option value="user">普通用户</option>
        </select>
      </div>
    </div>

    <!-- 用户列表表格 -->
    <div class="table-container">
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>邮箱</th>
            <th>角色</th>
            <th>状态</th>
            <th>注册时间</th>
            <th>最后登录</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="user in filteredUsers" :key="user.id">
            <td>{{ user.id }}</td>
            <td>{{ user.nickName }}</td>
            <td>{{ user.email }}</td>
            <td>
              <span :class="['role-badge', getRoleClass(user)]">
                {{ getRoleText(getUserRole(user)) }}
              </span>
            </td>
            <td>
              <span :class="['status-badge', user.status]">
                {{ getStatusText(user.status) }}
              </span>
            </td>
            <td>{{ formatDate(user.createdAt) }}</td>
            <td>{{ formatDate(user.lastLogin) }}</td>
            <td class="action-buttons">
              <button @click="viewUser(user)" class="btn-view" title="查看详情">
                <i class="icon-view"></i>
                查看
              </button>
              <button @click="editUser(user)" class="btn-edit" title="编辑">
                <i class="icon-edit"></i>
                编辑
              </button>
              <button @click="assignRole(user)" class="btn-assign-role" title="赋予角色">
                <i class="icon-role"></i>
                赋予角色
              </button>
              <button 
                v-if="user.status !== 'banned'" 
                @click="banUser(user)" 
                class="btn-ban" 
                title="封禁"
              >
                <i class="icon-ban"></i>
                封禁
              </button>
              <button 
                v-else 
                @click="unbanUser(user)" 
                class="btn-unban" 
                title="解封"
              >
                <i class="icon-unban"></i>
                解封
              </button>
              <button @click="deleteUser(user)" class="btn-delete" title="删除">
                <i class="icon-delete"></i>
                删除
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页控件 -->
    <div class="pagination">
      <button 
        @click="prevPage" 
        :disabled="currentPage === 1"
        class="btn-page"
      >
        上一页
      </button>
      <span class="page-info">
        第 {{ currentPage }} 页，共 {{ totalPages }} 页
      </span>
      <button 
        @click="nextPage" 
        :disabled="currentPage === totalPages"
        class="btn-page"
      >
        下一页
      </button>
    </div>

    <!-- 添加/编辑用户模态框 -->
    <div v-if="showAddUserModal || showEditUserModal" class="modal-overlay">
      <div class="modal">
        <div class="modal-header">
          <h2>{{ showEditUserModal ? '编辑用户' : '添加用户' }}</h2>
          <button @click="closeModal" class="btn-close">&times;</button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="saveUser">
            <div class="form-group">
              <label for="username">用户名</label>
              <input 
                type="text" 
                id="username" 
                v-model="userForm.username" 
                required
              />
            </div>
            <div class="form-group">
              <label for="email">邮箱</label>
              <input 
                type="email" 
                id="email" 
                v-model="userForm.email" 
                required
              />
            </div>
            <div class="form-group" v-if="!showEditUserModal">
              <label for="password">密码</label>
              <input 
                type="password" 
                id="password" 
                v-model="userForm.password" 
                required
              />
            </div>
            <div class="form-group">
              <label for="role">角色</label>
              <select id="role" v-model="userForm.role" required>
                <option value="user">普通用户</option>
                <option value="moderator">版主</option>
                <option value="admin">管理员</option>
              </select>
            </div>
            <div class="form-group">
              <label for="status">状态</label>
              <select id="status" v-model="userForm.status" required>
                <option value="active">活跃</option>
                <option value="inactive">未激活</option>
              </select>
            </div>
            <div class="form-actions">
              <button type="button" @click="closeModal" class="btn-cancel">
                取消
              </button>
              <button type="submit" class="btn-primary">
                {{ showEditUserModal ? '保存' : '添加' }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- 用户详情模态框 -->
    <div v-if="showUserDetailModal" class="modal-overlay">
      <div class="modal">
        <div class="modal-header">
          <h2>用户详情</h2>
          <button @click="showUserDetailModal = false" class="btn-close">&times;</button>
        </div>
        <div class="modal-body">
          <div class="user-detail">
            <div class="detail-item">
              <span class="label">ID:</span>
              <span class="value">{{ selectedUser.id }}</span>
            </div>
            <div class="detail-item">
              <span class="label">用户名:</span>
              <span class="value">{{ selectedUser.username }}</span>
            </div>
            <div class="detail-item">
              <span class="label">邮箱:</span>
              <span class="value">{{ selectedUser.email }}</span>
            </div>
            <div class="detail-item">
              <span class="label">角色:</span>
              <span :class="['role-badge', getRoleClass(selectedUser)]">
                {{ getRoleText(getUserRole(selectedUser)) }}
              </span>
            </div>
            <div class="detail-item">
              <span class="label">状态:</span>
              <span :class="['status-badge', selectedUser.status]">
                {{ getStatusText(selectedUser.status) }}
              </span>
            </div>
            <div class="detail-item">
              <span class="label">注册时间:</span>
              <span class="value">{{ formatDate(selectedUser.createdAt) }}</span>
            </div>
            <div class="detail-item">
              <span class="label">最后登录:</span>
              <span class="value">{{ formatDate(selectedUser.lastLogin) }}</span>
            </div>
          </div>
          <div class="modal-actions">
            <button @click="showUserDetailModal = false" class="btn-primary">
              关闭
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 用户赋予角色模态框 -->
    <div v-if="showAssignRoleModal" class="modal-overlay">
      <div class="modal large-modal">
        <div class="modal-header">
          <h2>赋予角色 - {{ selectedUser.username }}</h2>
          <button @click="closeAssignRoleModal" class="btn-close">&times;</button>
        </div>
        <div class="modal-body">
          <div class="role-assign-section">
            <h3>选择角色</h3>
            <div class="role-list">
              <div 
                v-for="role in roleList" 
                :key="role.id" 
                class="role-item"
                :class="{ 'selected': isRoleSelected(role.id) }"
                @click="toggleRoleSelection(role.id)"
              >
                <div class="role-info">
                  <h4>{{ role.name }}</h4>
                  <p>{{ role.description || '暂无描述' }}</p>
                </div>
                <div class="role-checkbox">
                  <input 
                    type="checkbox" 
                    :checked="isRoleSelected(role.id)"
                    @change="toggleRoleSelection(role.id)"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="form-actions">
            <button type="button" @click="closeAssignRoleModal" class="btn-cancel">
              取消
            </button>
            <button type="button" @click="saveUserRoles" class="btn-primary">
              保存
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { userApi, roleApi } from '@/api/modules'

// 响应式数据
const users = ref([])
const searchQuery = ref('')
const statusFilter = ref('')
const roleFilter = ref('')
const currentPage = ref(1)
const pageSize = ref(20)
const totalUsers = ref(0)

// 模态框状态
const showAddUserModal = ref(false)
const showEditUserModal = ref(false)
const showUserDetailModal = ref(false)
const showAssignRoleModal = ref(false)
const selectedUser = ref({})

// 用户表单
const userForm = ref({
  id: null,
  username: '',
  email: '',
  password: '',
  role: 'user',
  status: 'active'
})

// 角色相关数据
const roleList = ref([])
const selectedRoleIds = ref([])

// 计算属性
const filteredUsers = computed(() => {
  let result = users.value

  // 搜索过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(user => 
      user.nickName.toLowerCase().includes(query) || 
      user.email.toLowerCase().includes(query)
    )
  }

  // 状态过滤
  if (statusFilter.value) {
    result = result.filter(user => user.status === statusFilter.value)
  }

  // 角色过滤
  if (roleFilter.value) {
    result = result.filter(user => getUserRole(user) === roleFilter.value)
  }

  return result
})

const totalPages = computed(() => {
  return Math.ceil(totalUsers.value / pageSize.value)
})

// 生命周期钩子
onMounted(() => {
  fetchUsers()
})

// 方法
const fetchUsers = async () => {
  try {
    const params = {
      pageNo: currentPage.value,
      pageSize: pageSize.value
    }
    const response = await userApi.getUserPage(params)
    users.value = response.data.list || []
    totalUsers.value = response.data.total || 0
  } catch (error) {
    console.error('获取用户列表失败:', error)
    // 使用模拟数据作为后备
    users.value = getMockUsers()
    totalUsers.value = users.value.length
  }
}

const getMockUsers = () => {
  return [
    {
      id: 1,
      username: 'admin',
      email: 'admin@example.com',
      role: 'admin',
      status: 'active',
      createdAt: '2023-01-01T00:00:00Z',
      lastLogin: '2023-11-20T08:30:00Z'
    },
    {
      id: 2,
      username: 'moderator1',
      email: 'moderator1@example.com',
      role: 'moderator',
      status: 'active',
      createdAt: '2023-02-15T00:00:00Z',
      lastLogin: '2023-11-19T14:22:00Z'
    },
    {
      id: 3,
      username: 'user1',
      email: 'user1@example.com',
      role: 'user',
      status: 'active',
      createdAt: '2023-03-10T00:00:00Z',
      lastLogin: '2023-11-18T16:45:00Z'
    },
    {
      id: 4,
      username: 'user2',
      email: 'user2@example.com',
      role: 'user',
      status: 'inactive',
      createdAt: '2023-04-05T00:00:00Z',
      lastLogin: '2023-10-25T09:15:00Z'
    },
    {
      id: 5,
      username: 'banned_user',
      email: 'banned@example.com',
      role: 'user',
      status: 'banned',
      createdAt: '2023-05-20T00:00:00Z',
      lastLogin: '2023-09-10T11:30:00Z'
    }
  ]
}

const handleSearch = () => {
  currentPage.value = 1
  // 在实际应用中，这里应该调用API进行搜索
}

const filterUsers = () => {
  currentPage.value = 1
  // 在实际应用中，这里应该调用API进行筛选
}

const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
    fetchUsers()
  }
}

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
    fetchUsers()
  }
}

const viewUser = (user) => {
  selectedUser.value = { ...user }
  showUserDetailModal.value = true
}

const editUser = (user) => {
  userForm.value = { ...user }
  showEditUserModal.value = true
}

const saveUser = async () => {
  try {
    if (showEditUserModal.value) {
      // 编辑用户
      await userApi.updateUserInfo(userForm.value.id, userForm.value)
    } else {
      // 添加用户
      await userApi.register(userForm.value)
    }
    
    closeModal()
    fetchUsers()
  } catch (error) {
    console.error('保存用户失败:', error)
  }
}

const banUser = async (user) => {
  if (confirm(`确定要封禁用户 ${user.username} 吗？`)) {
    try {
      await userApi.banUser(user.id)
      fetchUsers()
    } catch (error) {
      console.error('封禁用户失败:', error)
    }
  }
}

const unbanUser = async (user) => {
  if (confirm(`确定要解封用户 ${user.username} 吗？`)) {
    try {
      await userApi.unbanUser(user.id)
      fetchUsers()
    } catch (error) {
      console.error('解封用户失败:', error)
    }
  }
}

const deleteUser = async (user) => {
  if (confirm(`确定要删除用户 ${user.username} 吗？此操作不可恢复！`)) {
    try {
      await userApi.deleteUser(user.id)
      fetchUsers()
    } catch (error) {
      console.error('删除用户失败:', error)
    }
  }
}

const closeModal = () => {
  showAddUserModal.value = false
  showEditUserModal.value = false
  userForm.value = {
    id: null,
    username: '',
    email: '',
    password: '',
    role: 'user',
    status: 'active'
  }
}

const getRoleText = (role) => {
  const roleMap = {
    super_admin: '超级管理员',
    admin: '管理员',
    moderator: '版主',
    user: '普通用户'
  }
  return roleMap[role] || role
}

const getUserRole = (user) => {
  // 从roleCodeList数组中获取第一个角色代码
  if (user && user.roleCodeList && Array.isArray(user.roleCodeList) && user.roleCodeList.length > 0) {
    return user.roleCodeList[0]
  }
  // 如果没有roleCodeList，则使用原来的role字段作为后备
  return user ? user.role : 'user'
}

const getRoleClass = (user) => {
  const role = getUserRole(user)
  // 为CSS类名转换，将super_admin转换为super_admin
  return role || 'user'
}

const getStatusText = (status) => {
  const statusMap = {
    active: '活跃',
    inactive: '未激活',
    banned: '已封禁'
  }
  return statusMap[status] || status
}

const formatDate = (dateString) => {
  if (!dateString) return '从未'
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN')
}

// 用户赋予角色相关方法
const assignRole = (user) => {
  selectedUser.value = { ...user }
  selectedRoleIds.value = []
  fetchRoles()
  fetchUserRoles(user.id)
  showAssignRoleModal.value = true
}

const fetchRoles = async () => {
  try {
    const response = await roleApi.getRolePage({ pageNo: 1, pageSize: 100 })
    roleList.value = response.data.list || []
  } catch (error) {
    console.error('获取角色列表失败:', error)
    // 使用模拟数据作为后备
    roleList.value = getMockRoles()
  }
}

const getMockRoles = () => {
  return [
    {
      id: 1,
      name: '超级管理员',
      code: 'super_admin',
      description: '拥有系统所有权限',
      status: 'active'
    },
    {
      id: 2,
      name: '管理员',
      code: 'admin',
      description: '拥有大部分管理权限',
      status: 'active'
    },
    {
      id: 3,
      name: '版主',
      code: 'moderator',
      description: '负责论坛内容管理',
      status: 'active'
    },
    {
      id: 4,
      name: '普通用户',
      code: 'user',
      description: '默认用户角色',
      status: 'active'
    }
  ]
}

const fetchUserRoles = async (userId) => {
  try {
    // 假设API返回用户已有的角色ID列表
    const response = await userApi.getUserInfo(userId)
    if (response.data && response.data.roleCodeList) {
      selectedRoleIds.value = response.data.roleCodeList.map(roleCode => {
        // 将角色代码转换为角色ID
        const role = roleList.value.find(r => r.code === roleCode)
        return role ? role.id : null
      }).filter(id => id !== null)
    }
  } catch (error) {
    console.error('获取用户角色失败:', error)
  }
}

const isRoleSelected = (roleId) => {
  return selectedRoleIds.value.includes(roleId)
}

const toggleRoleSelection = (roleId) => {
  const index = selectedRoleIds.value.indexOf(roleId)
  if (index > -1) {
    selectedRoleIds.value.splice(index, 1)
  } else {
    selectedRoleIds.value.push(roleId)
  }
}

const saveUserRoles = async () => {
  try {
    // 将选中的角色ID转换为角色代码
    const roleCodes = selectedRoleIds.value.map(roleId => {
      const role = roleList.value.find(r => r.id === roleId)
      return role ? role.code : null
    }).filter(code => code !== null)
    
    // 调用API保存用户角色
    await userApi.updateUserInfo(selectedUser.value.id, { roleCodeList: roleCodes })
    
    closeAssignRoleModal()
    fetchUsers()
  } catch (error) {
    console.error('保存用户角色失败:', error)
  }
}

const closeAssignRoleModal = () => {
  showAssignRoleModal.value = false
  selectedRoleIds.value = []
}
</script>

<style scoped>
.user-management {
  padding: 24px;
  background-color: #f8fafc;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-header h1 {
  color: #1e293b;
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

.btn-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background-color: #2563eb;
}

/* 搜索和筛选区域 */
.filter-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}

.search-box {
  position: relative;
  flex: 1;
  max-width: 400px;
}

.search-box input {
  width: 100%;
  padding: 10px 16px 10px 40px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  background-color: white;
}

.search-box .icon-search {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
}

.filter-options {
  display: flex;
  gap: 12px;
}

.filter-options select {
  padding: 10px 16px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  background-color: white;
  min-width: 120px;
}

/* 表格样式 */
.table-container {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 24px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

th {
  background-color: #f9fafb;
  color: #374151;
  font-weight: 600;
  font-size: 14px;
}

td {
  color: #1f2937;
  font-size: 14px;
}

tr:hover {
  background-color: #f9fafb;
}

/* 角色和状态徽章 */
.role-badge, .status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.role-badge.super_admin {
  background-color: #fef3c7;
  color: #92400e;
}

.role-badge.admin {
  background-color: #dbeafe;
  color: #1e40af;
}

.role-badge.moderator {
  background-color: #dcfce7;
  color: #166534;
}

.role-badge.user {
  background-color: #f3f4f6;
  color: #374151;
}

.status-badge.active {
  background-color: #dcfce7;
  color: #166534;
}

.status-badge.inactive {
  background-color: #fef3c7;
  color: #92400e;
}

.status-badge.banned {
  background-color: #fee2e2;
  color: #991b1b;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 8px;
}

.action-buttons button {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 12px;
  white-space: nowrap;
}

.btn-view {
  background-color: #eff6ff;
  color: #1e40af;
}

.btn-view:hover {
  background-color: #dbeafe;
}

.btn-edit {
  background-color: #f0fdf4;
  color: #166534;
}

.btn-edit:hover {
  background-color: #dcfce7;
}

.btn-assign-role {
  background-color: #f0f9ff;
  color: #0369a1;
}

.btn-assign-role:hover {
  background-color: #e0f2fe;
}

.btn-ban {
  background-color: #fef2f2;
  color: #991b1b;
}

.btn-ban:hover {
  background-color: #fee2e2;
}

.btn-unban {
  background-color: #f0f9ff;
  color: #0369a1;
}

.btn-unban:hover {
  background-color: #e0f2fe;
}

.btn-delete {
  background-color: #fef2f2;
  color: #991b1b;
}

.btn-delete:hover {
  background-color: #fee2e2;
}

/* 分页控件 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.btn-page {
  padding: 8px 16px;
  background-color: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-page:hover:not(:disabled) {
  background-color: #f9fafb;
}

.btn-page:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  color: #6b7280;
  font-size: 14px;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background-color: white;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.modal-header h2 {
  margin: 0;
  color: #1f2937;
  font-size: 18px;
  font-weight: 600;
}

.btn-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-body {
  padding: 24px;
}

/* 表单样式 */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #374151;
  font-weight: 500;
  font-size: 14px;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.btn-cancel {
  padding: 8px 16px;
  background-color: white;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-cancel:hover {
  background-color: #f9fafb;
}

/* 用户详情样式 */
.user-detail {
  margin-bottom: 24px;
}

.detail-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-item .label {
  width: 100px;
  color: #6b7280;
  font-weight: 500;
}

.detail-item .value {
  flex: 1;
  color: #1f2937;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
}

/* 角色赋予样式 */
.role-assign-section {
  margin-bottom: 24px;
}

.role-assign-section h3 {
  margin: 0 0 16px 0;
  color: #1f2937;
  font-size: 16px;
  font-weight: 600;
}

.role-list {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 16px;
  background-color: #f9fafb;
  max-height: 400px;
  overflow-y: auto;
}

.role-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  margin-bottom: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background-color: white;
  cursor: pointer;
  transition: all 0.2s;
}

.role-item:last-child {
  margin-bottom: 0;
}

.role-item:hover {
  border-color: #3b82f6;
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.1);
}

.role-item.selected {
  border-color: #3b82f6;
  background-color: #eff6ff;
}

.role-info h4 {
  margin: 0 0 4px 0;
  color: #1f2937;
  font-size: 14px;
  font-weight: 600;
}

.role-info p {
  margin: 0;
  color: #6b7280;
  font-size: 12px;
}

.role-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .filter-section {
    flex-direction: column;
  }
  
  .search-box {
    max-width: none;
  }
  
  .filter-options {
    width: 100%;
  }
  
  .filter-options select {
    flex: 1;
  }
  
  .action-buttons {
    flex-wrap: wrap;
  }
  
  .table-container {
    overflow-x: auto;
  }
}
</style>